import {ComponentType} from 'react'
import Taro, {Component, Config} from '@tarojs/taro'
import {View, Button, Text, Swiper, SwiperItem, Image, ScrollView, Form, Input, Picker} from '@tarojs/components'
import {getAvatar, pageSize, subTime, setStorage, navigateTo, memberTypeArr} from "../../utils/common";

import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import './auth.scss'


interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class OrderIndex extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {}

  componentWillMount() {
    // this.getSpreadUsers()
    // this.getUserShareCount()
    // this.getAllPrivilegeTypes()
  }

  getUserShareCount(): void {
    let {userStore} = this.props.stores
    userStore.getUserShareCount({
      callback: res => {
        this.setState({shareCount: res})
      }
    })
  }

  getSpreadUsers() {
    let {userStore} = this.props.stores
    let {currentNavId, pageIndex, pageSize} = this.state
    userStore.getSpreadUsers({
      formPrivilegeId: currentNavId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items: res.items})
        } else {
          const {items} = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getSpreadUsers()
      })
    }
  }

  changeCurrentNavId(id: number) {
    this.setState({
      currentNavId: id,
      pageIndex: 1,
      items: [],
    }, () => {
      this.getSpreadUsers()
    })
  }

  teamMember(item: object) {
    // 缓存信息给下个页面使用
    setStorage('fatherUser', item)
    navigateTo('/pages/user/team_member?id=' + item.id)
  }

  // 获取特权列表
  getAllPrivilegeTypes() {
    let {homeStore} = this.props.stores
    homeStore.getAllPrivilegeTypes({
      callback: res => {
        this.setState({
          vipList: res.items
        })
      }
    })
  }

  link(url: string = '/pages/index/index'): void {
    navigateTo(url)
  }

  submit() {
  }

  changePicker() {
  }

  render() {
    return (
      <View className='team page-bg content-20'>
        <Form onSubmit={this.submit.bind(this)} className='form-wrap'>
          <View className='form-body'>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>真实姓名</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='' placeholderClass='placeholder-class' placeholder='请输入真实姓名'/>
              </View>
            </View>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>身份证号码</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='' placeholderClass='placeholder-class'
                       placeholder='请输入身份证号码'/>
              </View>
            </View>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>储蓄卡号</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='' placeholderClass='placeholder-class'
                       placeholder='请输入储蓄卡号(可用于提现)'/>
              </View>
            </View>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>预留手机号</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='' type='number' maxLength={11}
                       placeholderClass='placeholder-class' placeholder='请输入'/>
              </View>
            </View>
          </View>
          <View className='circular-submit'>立即提交认证</View>
        </Form>
        <View className='desc'>提示： 用身份证号和银行卡号进行实名认证，认证后该银行卡可用于提现。</View>
      </View>
    )
  }
}

export default OrderIndex

